<template>
    <div style="background: rgb(239,243,246); padding-top: 20px;">
        <div style="display: flex;">
            <div class="kuang">
                <div class="img" style="background: rgb(55,80,184)">
                    <i class="el-icon-phone"></i>
                </div>
                <div>
                    <div class="bigFont" style="color: rgb(55,80,184)">00:00:00</div>
                    <div class="lightFont">通话时长</div>
                </div>
            </div>
            <div class="kuang">
                <div class="img" style="background: rgb(39,213,223)">
                    <i class="el-icon-phone-outline"></i>
                </div>
                <div>
                    <div class="bigFont" style="color: rgb(39,213,223)">0</div>
                    <div class="lightFont">拨通数</div>
                </div>
            </div>
            <div class="kuang">
                <div class="img" style="background: rgb(255,184,90)">
                    <i class="el-icon-more"></i>
                </div>
                <div>
                    <div class="bigFont" style="color: rgb(255,184,90)">0</div>
                    <div class="lightFont">未通数</div>
                </div>
            </div>
            <div class="kuang">
                <div class="img" style="background: rgb(39,213,223)">
                    <i class="el-icon-s-tools"></i>
                </div>
                <div>
                    <div class="bigFont" style="color: rgb(39,213,223)">0%</div>
                    <div class="lightFont">接通率</div>
                </div>
            </div>
        </div>

        <!-- 搜索筛选 -->
        <el-card class="box-card">
            <el-form :model="formInline" class="user-search" label-width="100px">
                <el-form-item label="外呼员工：">
                    <el-select v-model="formInline.emp" placeholder="选择外呼员工">
                        <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button @click="reset">重置</el-button>
                    <el-button type="primary" @click="search">搜索</el-button>
                </el-form-item>
                <el-form-item label="拨打时间：">
                    <el-link :underline="false">全部</el-link>
                    <el-link :underline="false">今日</el-link>
                    <el-link :underline="false">昨日</el-link>
                    <el-link :underline="false">近7日</el-link>
                    <el-link :underline="false">近30天</el-link>
                    <el-link :underline="false">近半年</el-link>
                    <el-link :underline="false">自定义</el-link>
                </el-form-item>
                <el-form-item label="状态：">
                    <el-link :underline="false">全部</el-link>
                    <el-link :underline="false">已接通</el-link>
                    <el-link :underline="false">未接通</el-link>
                </el-form-item>
            </el-form>
        </el-card>

        <!--列表-->
        <el-card class="box-card">
            <div style="display: flex; justify-content: space-between; margin-bottom: 15px;">
                <div style="line-height: 40px;  margin-bottom: 15px;">
                    <span style="color: rgb(59,82,185); font-weight: 900; font-size: 30px;">|</span> 呼叫明细
                </div>
                <div style="padding-top: 10px;">
                    <el-button type="primary">下载</el-button>
                    <el-button type="primary">导出</el-button>
                </div>
            </div>

            <el-table size="small" :data="listData" highlight-current-row v-loading="loading"
                      element-loading-text="拼命加载中" style="width: 100%;">
                <el-table-column v-if="false" prop="groupName" label="id" width="200">
                </el-table-column>
                <el-table-column align="center" type="selection" width="60">
                </el-table-column>
                <el-table-column prop="clientName" label="客户名称" width="150">
                </el-table-column>
                <el-table-column prop="lordName" label="手机号码" width="150">
                </el-table-column>
                <el-table-column prop="groupTag" label="归属人" width="150">
                </el-table-column>
                <el-table-column prop="PeopleNum" label="外呼员工" width="150">
                </el-table-column>
                <el-table-column prop="join" label="拨打时间" width="200">
                </el-table-column>
                <el-table-column prop="quit" label="拨打状态" width="200">
                </el-table-column>
                <el-table-column prop="quit" label="通话时长" width="200">
                </el-table-column>
                <el-table-column prop="quit" label="来源" width="200">
                </el-table-column>
                <el-table-column align="center" label="操作" min-width="150">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="detail(scope.row.id)" type="text">录音回放</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div style="display: flex; justify-content: flex-end;">
                <div style="width: 450px; height: 60px;">
                    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
                </div>
            </div>
        </el-card>


        <!-- 详情 -->
        <el-dialog title="座席详情" :visible.sync="detailVisible" width="30%" @click="close">
            <el-form :model="detailForm" label-width="140px">
                <el-form-item label="客户名称">
                    <el-input v-model="detailForm.seatNum" autocomplete="off" style="width: 60%"></el-input>
                </el-form-item>
                <el-form-item label="手机号码">
                    <el-input v-model="detailForm.seatNum" autocomplete="off" style="width: 60%"></el-input>
                </el-form-item>
                <el-form-item label="归属人">
                    <el-input v-model="detailForm.seatNum" autocomplete="off" style="width: 60%"></el-input>
                </el-form-item>
                <el-form-item label="使用员工">
                    <el-input v-model="detailForm.seatNum" autocomplete="off" style="width: 60%"></el-input>
                </el-form-item>
                <el-form-item label="外呼员工">
                    <el-input v-model="detailForm.seatNum" autocomplete="off" style="width: 60%"></el-input>
                </el-form-item>
                <el-form-item label="拨打时间">
                    <el-input v-model="detailForm.seatNum" autocomplete="off" style="width: 60%"></el-input>
                </el-form-item>
                <el-form-item label="号码类型">
                    <el-input v-model="detailForm.seatNum" autocomplete="off" style="width: 60%"></el-input>
                </el-form-item>
                <el-form-item label="座席类型">
                    <el-input v-model="detailForm.seatNum" autocomplete="off" style="width: 60%"></el-input>
                </el-form-item>
            </el-form>
            <div>
                <el-button size="mini" type="primary" @click="close">返回</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination'

import ElementUI from 'element-ui'
// 修改 el-dialog 默认点击遮照为不关闭
ElementUI.Dialog.props.closeOnClickModal.default = false;

export default {
    data() {
        return {
            // 列表数据
            listData: [],
            // 是否加载
            loading: false,
            // 详情页显示
            detailVisible: false,
            // 分页参数
            pageparm: {
                currentPage: 1,
                pageSize: 10,
                total: 0
            },
            // 搜索条件
            formInline: {
                seatName: '',
                status: '',
                seatNum: '',
                emp: '',
                page: '',
                limit: ''
            },
            // 详情数据
            detailForm: {

            },
            // 座席状态下拉选项
            options: [
                {
                    value: '0',
                    label: '正常'
                },
                {
                    value: '1',
                    label: '关闭'
                },
            ],
            // 外呼员工下拉选项
            options1: [
                {
                    value: '0',
                    label: '正常'
                },
                {
                    value: '1',
                    label: '关闭'
                },
            ]
        }
    },
    methods: {
        // 重置
        reset() {
            this.formInline.seatName = '';
            this.formInline.status = '';
            this.formInline.seatNum = '';
            this.formInline.emp = '';
        },
        // 查询
        search() {
            this.getdata(this.formInline)
        },
        // 详情
        detail(id) {
            this.detailVisible = true;
        },
        // 关闭弹出框
        close() {
            this.visible = false;
            this.detailVisible = false;
        },
        // 分页插件事件
        callFather(parm) {
            // this.formInline.page = parm.currentPage
            // this.formInline.limit = parm.pageSize
            this.getdata(this.formInline)
        },
        // 数据展示
        getdata(parameter) {
            this.loading = true
            // 模拟数据开始
            let res = {
                code: 0,
                msg: null,
                count: 5,
                data: [
                    {
                        id: '123456',
                        groupName: '9527客户群',
                        lordName: '孙鑫雨',
                        groupTag: '客户群',
                    }
                ]
            }
            this.loading = false
            this.listData = res.data
            // this.pageparm.currentPage = this.formInline.page
            // this.pageparm.pageSize = this.formInline.limit
            this.pageparm.total = res.count
        },
    },
    // 注册组件
    components: {
        Pagination,
    },
    /**
     * 创建完毕
     */
    created() {
        this.getdata(this.formInline)
    },
}
</script>

<style scoped>
.el-card {margin-top: 15px;}
/deep/ .el-card__body {padding: 10px 12px;}

/* 表格内背景颜色 */
/deep/ .el-table th {background-color: rgb(242,244,247); color: #666;}

/* 头部4框布局 */
.kuang {flex: 1; height: 100px; margin-right: 20px;display: flex; box-sizing:border-box; padding: 15px 20px; background: #fff;}
.kuang>div{height: 70px;}
div .kuang:nth-child(4){margin: 0;}
.img{width: 70px; border-radius: 35px; margin-right: 15px; font-size: 30px; color: #fff; padding: 20px; box-sizing:border-box;}

.el-link{margin-right: 20px;}
.el-button--small{padding: 0;}

.smallFont {font-weight: 600; font-size: 16px;}
.bigFont {font-weight: 700; font-size: 40px;}
.lightFont {color: #aaa; font-weight: 400;}
</style>
